<template>
  <qf-table
    :columns="columns"
    :tableData="tableData"
    :tableLoading="tableLoading"
  >
    <!-- 产品图片 -->
    <template v-slot:orderDetail[0].imageUrl="{ row }">
      <img :src="row.orderDetail[0].imageUrl" width="100" height="30" alt="" />
    </template>
    <!-- 操作按钮 -->
    <template v-slot:action="{ row }">
      <el-button
        size="small"
        type="primary"
        :disabled="row.order_status === 4 || row.pay_status == 1"
        @click="pay(row)"
      >
        去支付
      </el-button>
      <el-button size="small" type="danger" @click="delOrder(row)">
        删除
      </el-button>
    </template>
    <!-- 支付状态 -->
    <template v-slot:pay_status="{ row }">
      {{ row.pay_status === 0 ? "未支付" : "已支付" }}
    </template>
    <!-- 订单状态 -->
    <template v-slot:order_status="{ row }">
      {{ orderStatus(row) }}
    </template>
  </qf-table>
</template>
<script setup>
import * as api from "@/api/pay";
import qfTable from "@/components/qfTable/index.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref } from "vue";
import { useRouter } from "vue-router";
let router = useRouter();
//定义表格的列
let columns = ref([
  {
    label: "产品图片",
    prop: "orderDetail[0].imageUrl",
  },
  {
    label: "订单编号",
    prop: "order_id",
  },
  {
    label: "产品名称",
    prop: "orderDetail[0].productName",
  },
  {
    label: "数量",
    prop: "orderDetail[0].quantity",
    width: "70px",
  },
  {
    label: "总价格",
    prop: "total_fee",
  },
  {
    label: "创建时间",
    prop: "create_time",
    width: "250px",
  },
  {
    label: "支付状态",
    prop: "pay_status",
  },
  {
    label: "订单状态",
    prop: "order_status",
  },
  {
    label: "操作",
    prop: "action",
  },
]);

//表格数据
let tableData = ref([]);

//请求数据

//声明loading加载动画
let tableLoading = ref(false);

let getList = async () => {
  tableLoading.value = true;
  try {
    let res = await api.getOrderApi();
    console.log(res);
    tableData.value = res.data.data;
    tableLoading.value = false;
  } catch (e) {
    console.log(e);
    tableLoading.value = false;
  }
};

getList();

//订单状态
// 订单状态:0未提交 1提交成功 2已经取消 3无效订单 4.交易关闭 5退货

let orderStatus = (row) => {
  switch (row.order_status) {
    case 0:
      return "未提交";
    case 1:
      return "提交成功";
    case 2:
      return "已经取消";
    case 3:
      return "无效订单";
    case 4:
      return "交易关闭";
    case 5:
      return "退货";
  }
};

//去支付

let pay = (row) => {
  // console.log(row)
  //跳转到支付页面,通过query携带当前的order_id
  router.push("/pay/payment?order_id=" + row.order_id);
};

//删除订单

let delOrder = async (row) => {
  ElMessageBox.confirm(
    "此操作将永久删除 " + row.order_id + ", 是否继续?",
    "删除提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(async () => {
      //2.发请求,删除数据
      try {
        let res = await api.delOrderApi(row.order_id);
        ElMessage({
          type: "success",
          message: "删除成功",
        });
        getList();
      } catch (e) {
        ElMessage({
          type: "error",
          message: e.toString(),
        });
      }
    })
    .catch(() => {
      ElMessage({
        type: "warning",
        message: "已取消删除",
      });
    });
};
</script>
<script>
export default {
  meta: {
    title: "order",
    name: "订单管理",
    routeName: "order",
    icon: "icon-dd",
  },
};
</script>
